<template>
	<view class="container">
		<!-- 顶部固定区 -->
		<view class="fixed-view">
			<!-- top -->
			<view class="page-top">
				日常收支
			</view>
			<!-- 账户总览 -->
			<view class="des-account">
				<view class="account-total">
					<view class="account-total-month">
						<text><uni-dateformat :date="getNowMonth()" format="M月"></uni-dateformat>支出</text>
						<text class="top-data-more" @click="goCashLogMonth">月度账单</text>
					</view>
					<view class="account-total-money-view">
						<text
							class="account-total-money">{{ '-￥' + formatMoney(account_total_out.replace('-','')) }}</text>
					</view>
				</view>
				<qiun-data-charts style="height: 220rpx;" type="area" :opts="opts" :chartData="chartData"
					:ontouch="true" :onmovetip="true" :loadingType="0" :tapLegend="false"
					tooltipFormat="myTooltip_day" />
			</view>
		</view>

		<!-- 内容区 -->
		<view class="day-pay-list">
			<!-- 标题 -->
			<view class="pay-list-title">
				<view class="pay-list-title-left">今日交易</view>
				<view :class="['pay-list-title-right', gteq(day_pay_total, '0') ? 'money-green':'money-red']"
					@click="goCashLogDay">
					<text class="pay-list-title-right-money">{{ '￥' + formatMoney(day_pay_total) }}</text>
					<uni-icons class="data-more" type="right" size="12" color="#3cc51f"></uni-icons>
				</view>
			</view>
			<!-- 今日交易 -->
			<scroll-view class="content-view-scroll" scroll-y>
				<view class="pay-list-item" v-for="item, index in day_pay_list" :key="index"
					@click="goUpdateCashLog(item)">
					<view class="pay-list-item-left">
						<image class="item-info-icon" mode="aspectFit" :src="item.icon"></image>
					</view>
					<view class="pay-list-item-right">
						<view class="pay-list-item-content">
							<view class="type">{{ item.cashType }}</view>
							<view
								:class="['money', item.payType == 3 ? '' : gteq(item.money, '0') ? 'money-green':'money-red']">
								{{gteq(item.money, '0') ? ('￥' + formatMoney(item.money)) : ('-￥' + formatMoney((item.money.replace('-',''))))}}
							</view>
						</view>
						<view class="pay-list-item-time">
							<view class="time">
								<uni-dateformat :date="item.payTime" format="hh:mm"></uni-dateformat>
								<view class="time-note" v-if="item.note && item.note.trim() != ''">
									{{ "- " + item.note }}
								</view>
							</view>
							<view class="account">
								<text class="account_item">{{ item.account }}</text>
								<uni-icons v-if="item.payType == 3" type="arrow-right" size="8"
									color="#999999"></uni-icons>
								<text class="account_item" v-if="item.payType == 3">{{ item.account2 }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 悬浮按钮 -->
		<zjw-float-button label="+" width="120rpx" bgColor="rgba(7, 193, 96, 1)" @click="openCalculator()">
		</zjw-float-button>

		<!-- 计算器组件 -->
		<zjw-calculator ref="myCalculator" @confirm="confirmCalculator" @cancel="cancelCalculate">
		</zjw-calculator>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	import {
		onPullDownRefresh,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getNowDate,
		getNowDateTime,
		getNowMonth,
		formatMoney
	} from '@/utils/utils.js'
	import {
		getCashLogListForDate,
		getCashLogListForMonth
	} from '@/service/service-api.js'
	import {
		eq,
		gteq
	} from '@/utils/math-utils'

	const opts = ref({
		color: ["#FC8452", "#EE6666", "#1890FF", "#91CB74", "#FAC858", "#73C0DE", "#3CA272", "#9A60B4", "#ea7ccc"],
		padding: [5, 20, 0, 10],
		xAxis: {
			axisLineColor: "transparent",
			disabled: false, // 是否禁止绘制x轴
			disableGrid: true, // 是否禁止显示网格线
			labelCount: 8, // 单屏幕数据点文字（刻度点）限制显示的数量
			fontSize: 10,
			fontColor: "#FC8452"
		},
		yAxis: {
			data: [{
				// min: 0, // 最小刻度值，不写默认数据中的最小值
				axisLineColor: "transparent",
				axisLine: false, //坐标轴轴线是否显示（数据还能显示） 默认true
				disabled: true, // 是否禁止绘制y轴
				fontSize: 10,
				fontColor: "#FC8452"
			}],
			disableGrid: true, // 是否禁止显示网格线
		},
		dataLabel: false, // 是否显示面板数据
		dataPointShape: false, // 是否显示数据点的图形标识
		dataPointShapeType: 'solid', //图形标识点显示类型，可选值：'solid'实心,'hollow'空心
		legend: {
			show: false, // 隐藏图例名称
		},
		enableScroll: false,
		extra: {
			tooltip: {
				// 开启跟手显示tooltip功能（前提条件，1、需要开启touch功能，即:ontouch="true"；2、并且opts.enableScroll=false即关闭图表的滚动条功能）
				showArrow: false, // 是否显示旁边的小三角箭头
				bgColor: '#ffffff',
				bgOpacity: 0.5,
				fontColor: '#ff1100',
				fontSize: 10,
				lineHeight: 14,
				borderRadius: 4,
				splitLine: true, // 是否显示垂直竖线
				horizentalLine: false, // 是否显示水平横线
				gridColor: '#FC8452', // 竖线颜色
				gridType: 'dash', // 线型，可选值：'solid'实线,'dash'虚线
				dashLength: 6, // 虚线长度 默认 4
				legendShow: false // 是否显示左侧图例图标
			},
			area: { // 区域图配置
				type: "curve", // 区域图类型，可选值："straight"尖角折线模式,"curve"曲线圆滑模式,"step"时序图模式
				opacity: 0.2, // 区域图透明度
				addLine: true, // 是否叠加相应的折线
				width: 2, // 叠加的折线宽度
				gradient: true, // 是否开启区域图渐变色
				activeType: "none" // 激活指示点类型，可选值："none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
			}
		}
	}) // 图表配置
	const isShowListDialog = ref(false) // 图表数据
	const chartData = ref({}) // 图表数据
	const account_total_out = ref('0') // 图表数据_支出总额
	const day_pay_list = ref([]) // 今日交易记录列表
	const day_pay_total = ref('0') // 今日交易记录总金额
	const myCalculator = ref(null) // 计算器组件

	onShow(() => {
		refreshPageData()
	})

	// 下拉刷新
	onPullDownRefresh(() => {
		// 执行数据刷新逻辑
		refreshPageData(true)
	});

	// // #ifndef H5
	// // 保持屏幕常亮
	// uni.setKeepScreenOn({
	// 	keepScreenOn: true,
	// });
	// // #endif

	// 刷新页面数据
	const refreshPageData = (neesStopPullDownRefresh = false) => {
		getChartData(getNowMonth())
		getDayCashLogData(getNowDateTime())
		// 停止下拉刷新动画
		if (neesStopPullDownRefresh) {
			uni.stopPullDownRefresh()
		}
	}

	// 获取图表数据
	const getChartData = (month) => {
		const monthCash = getCashLogListForMonth(month, 2, 0)
		if (monthCash.list.length == 0) {
			account_total_out.value = "0"
			chartData.value = {}
			return
		}

		account_total_out.value = monthCash.total

		// 按时间正序排序
		monthCash.list.sort((a, b) => a.payTime > b.payTime ? 1 : -1);
		let categories = []
		let series_data = []
		for (const item of monthCash.list) {
			categories.push(Number.parseInt(item.payTime.slice(8, 10)))
			series_data.push(item.money.slice(1)) // 支出负数改为正数
		}
		chartData.value = {
			'categories': categories,
			'series': [{
				'name': "支出",
				'data': series_data
			}]
		}
	}

	// 获取今日消费记录，最多10条
	const getDayCashLogData = (day) => {
		const dayPay = getCashLogListForDate(day, 0, '', 0, 10)
		day_pay_list.value = dayPay.list
		day_pay_total.value = dayPay.total
	}

	// 前往编辑交易信息页面
	const goEditCashLogInfo = (logInfo) => {
		uni.navigateTo({
			url: "/pages/cash_log_info/cash_log_info?logInfo=" + JSON.stringify(logInfo)
		})
	}

	// 前往每日交易明细
	const goCashLogDay = () => {
		uni.navigateTo({
			url: '/pages/cash_log_day/cash-log-day'
		})
	}

	// 前往月度账单
	const goCashLogMonth = () => {
		uni.navigateTo({
			url: '/pages/cash_log_month/cash-log-month'
		})
	}

	// 打开计算器
	const openCalculator = () => {
		uni.hideTabBar();
		myCalculator.value.open()
	}

	// 计算器组件-取消计算
	const cancelCalculate = () => {
		uni.showTabBar();
	}

	// 计算器组件-确认事件：计算结果 value
	const confirmCalculator = (value) => {
		// 输入时不带正负
		if (value.startsWith('-')) {
			value = value.slice(1)
		}
		uni.showTabBar();
		// 主页的计算器组件-确认事件：计算结果 value
		let logInfo = {
			'id': 0,
			'money': value, // 金额 (输入时不带正负，保存时添加正负)
			'account': '', // 账户名称 (使用账户名称,名称唯一)
			'payType': 2, // 1 收入、 2 支出、 3 转账
			'cashType': '', // 收支分类 (使用分类名称,名称唯一)
			'payTime': getNowDateTime(), // 收支时间
			'note': '', // 备注
			'account2': '', // 转账收款账户名称 (使用账户名称,名称唯一)
		}
		goEditCashLogInfo(logInfo)
	}

	// 准备编辑交易记录页面
	const goUpdateCashLog = (row) => {
		// 输入时不带正负
		let inputMoney = '0'
		if (row.money.startsWith('-')) {
			inputMoney = row.money.slice(1)
		} else {
			inputMoney = row.money
		}
		let logInfo = {
			'id': row.id,
			// 页面金额统一显示为正数，保存接口自动判断正负。
			'money': inputMoney, // 金额 (输入时不带正负，保存时添加正负)
			'account': row.account, // 账户名称 (使用账户名称,名称唯一)
			'payType': row.payType, // 1 收入、 2 支出、 3 转账
			'cashType': row.cashType, // 收支分类 (使用分类名称,名称唯一)
			'payTime': row.payTime, // 收支时间
			'note': row.note, // 备注
			'account2': row.account2, // 转账收款账户名称 (使用账户名称,名称唯一)
		}
		goEditCashLogInfo(logInfo)
	}
</script>

<style lang="scss">
	@import url("index.css");
</style>